<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务二：零基础HTML及CSS编码（一）</title>
	<link rel="stylesheet" type="text/css" href="css/task1_1.css">
</head>
<body>
	<div id="header">
		<h1>百度</h1>
		<nav>
			<ul>
				<li><a href="#">新闻</a></li>
				<li><a href="#">地图</a></li>
				<li><a href="#">博客</a></li>
				<li><a href="#">资讯</a></li>
			</ul>
		</nav>
	</div>
	<div id="sidebar">
		<div class="sidebar-content">
			<h2>登录</h2>
			<form>
				<label>
					<span>请输入邮箱地址</span>
					<input type="text" name="">
				</label>
				<label class="prompt">邮箱地址请按要求格式输入</label>
				<label>
					<span>请输入密码</span>
					<input type="password" name="">
				</label>
				<label>
					<span>请重复输入密码</span>
					<input type="password" name="">
				</label>
				<label class="prompt">密码为6--16位英文数字</label>
				<label>
					<span>性别</span>
					<input type="radio" name="gender" value="m">男
					<input type="radio" name="gender" value="f" checked>女
				</label>
				<label>
					<span>城市</span>
					<select>
						<option>北京</option>
						<option>上海</option>
					</select>
				</label>
				
				<label>
					<span>爱好</span>
					<input type="checkbox" name="interest" value="sport">运动
					<input type="checkbox" name="interest" value="art">艺术
					<input type="checkbox" name="interest" value="sic">科学
				</label>
				<label>
					<span>个人描述</span>
					<textarea placeholder="请用一句话描述自己" rows="5" cols="20"></textarea>
				</label>
				<input type="submit" name="" value="确认提交">
			</form>
		</div>
	</div>
	<div class="left">
		<div id="passage">
			<article>
				<h2>城市竞争力</h2>
				<h3>我国城市竞争力排行榜发布</h3>
				<p class="artinfo">
					<span class="author">Mr right</span>
					<span class="pubtime">时间：2015.06.18 20:22:19</span>
				</p>
				<p>课程多数题目的解决方案都不是唯一的，出的参考资料未必是实现需求所必须的。<br />有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不是唯一的，后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。<a href="http://ife.baidu.com">链接到百度</a>所以和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<img src="images/promo2.png">
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也<br />是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。<a href="http://ife.baidu.com" target="">新的链接</a>因此，我们的要求的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
			</article>
			<article>
				<h2>另外一篇文章一级标题</h2>
				<h3>文章二级标题</h3>
				<p class="artinfo">
					<span class="author">Mr right</span>
					<span class="pubtime">时间：2015.06.18 20:22:19</span>
				</p>
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也<br />是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也<br />是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也<br />是一致的。<a href="http://ife.baidu.com" target="">新的链接</a>因此，我必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍</p>
				<img src="images/promo2.png">
				<ul>
					<li>项目列表</li>
					<li>项目列表</li>
					<li>项目列表</li>
				</ul>
			</article>
			<article>
				<h2>图片</h2>
				<!--figure和figcaption-->
				<ul class="picture">
					<li>孙燕姿<br />
						<img src="images/promo2.png" alt="">
					</li>
					<li>孙燕姿<br />
						<img src="images/promo2.png" alt="">
					</li>
					<li>孙燕姿<br />
						<img src="images/promo2.png" alt="">
					</li>
					<li>孙燕姿<br />
						<img src="images/promo2.png" alt="">
					</li>
					<li>孙燕姿<br />
						<img src="images/promo2.png" alt="">
					</li>
				</ul>
			</article>
			<article>
				<h2>气候变暖</h2>
				<h3>二氧化碳导致全球气候变暖</h3>
				<p class="artinfo">
					<span class="author">Mr right</span>
					<span class="pubtime">时间：2015.06.18 20:22:19</span>
				</p>
				<ol class="rank" type="1">
					<li>排名1</li>
					<li>排名2</li>
					<li>排名3</li>
				</ol>
				<p>下面是一个表格</p>
				<table>
					<thead>
						<tr>
							<th>表头</th>
							<th>表头</th>
							<th>表头</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>单元格</td>
							<td>单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>单元格</td>
							<td>单元格</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>总价</td>
							<td colspan="2">2000</td>
						</tr>
					</tbody>
				</table>
			</article>		
		</div>
	</div>
	<div id="footer">
		<span>版权所有</span>
	</div>
</body>
</html>